import React, {FC, useMemo} from "react";
import {createFetchParams} from "../../../utils";
import {AxiosSer} from "../../../services/HttpService";
import useThrottle from "../../../customUse/useThrottle";
import Config from "../../../Config";
import {closeModal} from "../../../services/ModalService";
import SelectModal from "../select/SelectModal.tsx";

interface MenuMoveProps {
    menuId: string,
    url: string,
    pName: string,
    method: string,
    extend?: any,
    valKey: string,
}

const MenuMove: FC<MenuMoveProps> = (props) => {
    const onOk: Function = useThrottle(async (selectData: any[]) => {
        let fetchParams: any = createFetchParams(props), otherParams: any = {};
        if (!fetchParams.url) {
            return null
        }
        otherParams.parentId = selectData.map((item: any) => item[props.valKey]).join();
        let result: any = await AxiosSer(fetchParams.url, props.method || "POST", {
            ...fetchParams.params, ...otherParams,
            [Config.axiosSerMenuKey]: props.menuId
        })
        result.code == "1" && await closeModal(props.modalKey, async () => {
            return {...result};
        })
    }, 2000, [props]);

    const renderMenuMove = useMemo(() => {
        return (<SelectModal
            {...props}
            onOk={onOk}
        />)
    }, [props]);

    return (renderMenuMove);
};

export default React.memo(MenuMove);